// 坐标点样式
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from "ol/style";
import Icon from "ol/style/Icon";

// 坐标点样式

export const PointDangerStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/points/pointDanger.png"), //图标的URL
  }),
});

export const PointInfoStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/points/pointInfo.png"), //图标的URL
  }),
});

export const PointPrimaryStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/points/pointPrimary.png"), //图标的URL
  }),
});

export const PointSuccessStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/points/pointSuccess.png"), //图标的URL
  }),
});

export const PointWarningStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/points/pointWarning.png"), //图标的URL
  }),
});

// 基站样式

export const SiteDangerStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/sites/siteDanger.png"), //图标的URL
  }),
});

export const SiteInfoStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/sites/siteInfo.png"), //图标的URL
  }),
});

export const SitePrimaryStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/sites/sitePrimary.png"), //图标的URL
  }),
});

export const SiteSuccessStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/sites/siteSuccess.png"), //图标的URL
  }),
});

export const SiteWarningStyle = new Style({
  image: new Icon({
    anchor: [0.5, 1], //锚点
    opacity: 1,
    scale: 1,
    src: require("../icon/sites/siteWarning.png"), //图标的URL
  }),
});

// 点标识样式

export const PointStyle = function (color, radius) {
  return new Style({
    image: new CircleStyle({
      fill: new Fill({
        color: color,
      }),
      radius: radius,
    }),
  });
};

// 覆盖圆样式

export const CircleCustomStyle = function (color) {
  return new Style({
    fill: new Fill({
      color: color,
    }),
  });
};

// 鼠标绘制覆盖物样式

export const DrawStyle = new Style({
  fill: new Fill({
    color: "rgba(255, 255, 255, 0.2)",
  }),
  stroke: new Stroke({
    color: "#409eff",
    width: 3,
  }),
  image: new CircleStyle({
    radius: 3,
    fill: new Fill({
      color: "#ffcc33",
    }),
  }),
});

// 多边形样式

export const PolygonStyle = new Style({
  fill: new Fill({
    color: "rgba(255, 255, 255, 0.3)",
  }),
  stroke: new Stroke({
    color: "#67c23a",
    width: 3,
  }),
});

// 绿色扇形标识
export const SectorGreenStyle = function (type = 'green', angle = 0) {
  return new Style({
    image: new Icon({
      anchor: [0.5, 1], //锚点
      scale: 0.25,
      opacity: 0.7,
      rotation: angle * (Math.PI / 180),
      src: type == 'green' ? require("../icon/sector/green.png") : require("../icon/sector/blue.png") //图标的URL
    }),
  });
};

export function iconTextStyle(style, text) {
  return new Style({
    image: new Icon(
      ({
        anchor: [0.5, 60],
        anchorOrigin: 'top-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-right',
        // offset:[0,10],
        //图标缩放比例
        // scale:0.5,
        //透明度
        opacity: 0.75,
        //图标的url
        src: '../icon/sites/sitePrimary.png'
      })),
    text: new Text({
      //位置
      textAlign: 'center',
      //基准线
      textBaseline: 'middle',
      //文字样式
      font: 'normal 14px 微软雅黑',
      //文本内容
      text: text,
      //文本填充样式（即文字颜色）
      fill: new Fill({color: '#aa3300'}),
      stroke: new Stroke({color: '#ffcc33', width: 2})
    })
  });
}
